import React, { useState } from 'react';
import './index.scss';
import { removeBackground } from '@imgly/background-removal';
import { Spin, Button, message, Modal, Select } from 'antd';

const { Option } = Select;

function App(props) {
    const { img } = props;
    const [processedImage, setProcessedImage] = useState('');
    const [loading, setLoading] = useState(false);
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [downloadOptions, setDownloadOptions] = useState({ size: '300x200', type: 'png' });

    const handleProcessImage = async () => {
        setLoading(true);
        try {
            const response = await fetch(img); // 获取本地图片
            const blob = await response.blob(); // 将其转为Blob
            const processedBlob = await removeBackground(blob); // 调用抠图函数
            const processedUrl = URL.createObjectURL(processedBlob);
            setProcessedImage(processedUrl);
            message.success('图像处理成功！');
        } catch (error) {
            console.error(error);
            message.error(`处理图像时出错: ${error.message}`);
        } finally {
            setLoading(false);
        }
    };

    const showDownloadModal = () => {
        setIsModalVisible(true);
    };

    const handleDownload = () => {
        if (!processedImage) return;

        const link = document.createElement('a');
        link.href = processedImage; // 使用处理后的图像URL
        link.download = `processed-image.${downloadOptions.type}`; // 设置下载的文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);

        setIsModalVisible(false); // 关闭模态框
    };

    const handleSelectChange = (key, value) => {
        setDownloadOptions(prev => ({ ...prev, [key]: value }));
    };

    return (
        <div className="App">
            <h1>本地文件智能抠图示例</h1>
            <Button type="primary" onClick={handleProcessImage} disabled={loading || !img}>
                处理本地图像
            </Button>
            {loading && <Spin size="large" />}
            {img && (
                <div className="preview">
                    <h2>原始图像</h2>
                    <img src={img} alt="Local" />
                </div>
            )}
            {processedImage && (
                <div className="processed-preview">
                    <h2>处理后的图像</h2>
                    <img src={processedImage} alt="Processed Preview" />
                    <Button type="default" onClick={showDownloadModal} style={{ marginTop: '10px' }}>
                        下载处理后的图像
                    </Button>
                </div>
            )}

            <Modal
                title="下载设置"
                visible={isModalVisible}
                onOk={handleDownload}
                onCancel={() => setIsModalVisible(false)}
            >
                <div>
                    <label htmlFor="size">选择图片尺寸:</label>
                    <Select
                        id="size"
                        defaultValue="300x200"
                        style={{ width: 120 }}
                        onChange={(value) => handleSelectChange('size', value)}
                    >
                        <Option value="300x200">300x200</Option>
                        <Option value="600x400">600x400</Option>
                        <Option value="1200x800">1200x800</Option>
                    </Select>
                </div>
                <div style={{ marginTop: 16 }}>
                    <label htmlFor="type">选择图片类型:</label>
                    <Select
                        id="type"
                        defaultValue="png"
                        style={{ width: 120 }}
                        onChange={(value) => handleSelectChange('type', value)}
                    >
                        <Option value="png">PNG</Option>
                        <Option value="jpeg">JPEG</Option>
                    </Select>
                </div>
            </Modal>
        </div>
    );
}

export default App;
